<template>
    <z-block url="/do/get/contract" :params="params">
        <template #default="contract">
            <el-tab-pane label="合同信息" name="contract">
                <div class="form-spacing"></div>
                <z-page-title value="签署方"/>
                <el-descriptions direction="vertical" :column="2" border>
                    <el-descriptions-item v-for="(item, index) in contract.party" :key="index" :label="item.label">
                        <z-text :modelValue="item.signer" depend="party" size="large"/>
                    </el-descriptions-item>
                </el-descriptions>
                <div class="form-spacing"></div>
                <div class="header-container">
                    <z-page-title value="其他信息"/>
                    <z-action label='编辑基本信息' mode='dialog' :fields="patchFields" :data="contract" type='primary'
                              url='/do/patch/contract'/>
                </div>
                <el-descriptions column="2" border>
                    <el-descriptions-item label="收支类型">
                        <z-dict readonly :modelValue="contract.inorout" code="inorout"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="合同金额">
                        <z-money :modelValue="contract.total"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="履约对象">
                        <z-text :modelValue="contract.performParty" depend="party" size="large"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="开始时间">
                        <z-date :value="contract.effective"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="结束时间">
                        <z-date :value="contract.end"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="合同说明">
                        {{ contract.explain }}
                    </el-descriptions-item>
                    <el-descriptions-item label="创建人">
                        <z-avatar :value="contract.creator" :plain="false"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="负责人">
                        <!-- <z-user readonly :modelValue="contract.head"/> -->
                        <z-avatar :value="contract.head" :plain="false"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="负责人部门">
                        {{ contract.department }}
                    </el-descriptions-item>
                    <el-descriptions-item label="关联合同">
                        <z-text :modelValue="contract.related" depend="contract" size="large"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="子合同">
                        <z-text :modelValue="contract.local" depend="contract" size="large"/>
                    </el-descriptions-item>
                    <el-descriptions-item label="合同正文">
                        {{ contract.file }}
                    </el-descriptions-item>
                    <el-descriptions-item label="附件">
                        {{ contract.attachment }}
                    </el-descriptions-item>
                    <el-descriptions-item label="双章合同">
                        {{ contract.double }}
                    </el-descriptions-item>

                </el-descriptions>

            </el-tab-pane>
        </template>
    </z-block>
</template>

<script>


export default {
    props: {
        params: Object,
    },
    data() {
        return {
            patchFields: [
                {label: '合同名称', name: 'title'},
                {label: '负责人', name: 'head', type: 'user'},
                {label: '负责人部门', name: 'department'},
                {label: '合同说明', name: 'explain', type: 'textarea'},
                {label: '生效时间', name: 'effective', type: 'date'},
                {label: '截止时间', name: 'end', type: 'date'},
                {label: '关联合同', name: 'related', type: 'search', depend: "contract", multiple: true, tenant: true},
                {label: '子合同', name: 'local', type: 'search', depend: "contract", multiple: true, tenant: true},
            ],
        }
    },
}
</script>

<style scoped>
.form-spacing {
    margin: 10px 0;
    height: 0;
    position: relative;
}

.header-container {
    display: flex;
    align-items: center;
    padding: 30px 0;
}
</style>
